<template>
<div class="postmsg">
    <el-dialog title="图斑信息-地塘块信息" :visible.sync="LandParcelInfoVisible" width="75%" :before-close="handleClose" :append-to-body="appendtobody">
        <el-row>
            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                <el-form :disabled="false" :model="LandParcelInfo" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="图斑ID">
                        <el-input v-model="LandParcelInfo.landCode" :disabled="true">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="地塘块命名">
                        <el-input v-model="LandParcelInfo.landName" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="镇街">
                        <el-select :disabled="!type" style="width: 100%" v-model="currentTownCode" placeholder="请选择" @change="townChange">
                            <el-option v-for="(item, itemIndex) in town" :key="itemIndex" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="村居">
                        <el-select :disabled="!type" style="width: 100%" v-model="currentVillagerCode" placeholder="请选择">
                            <el-option v-for="(itemChildren, ChildrenIndex) in villager" :key="ChildrenIndex" :label="itemChildren.label" :value="itemChildren.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item label="一级类型">
              <el-input v-model="LandParcelInfo.landType"></el-input>
            </el-form-item> -->
                    <el-form-item label="地块类型">
                        <el-cascader :disabled="!type" v-model="LandParcelInfo.landType" :options="cascaderOptionsOne" @change="handleChange" style="width: 100% !important">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="农产品分类">
                        <el-cascader :disabled="!type" v-model="LandParcelInfo.landProduct" :options="cascaderOptionsTwo" filterable @change="handleChangeTwo" style="width: 100% !important">
                        </el-cascader>
                        <!--                        <el-input :disabled="!type" v-model="LandParcelInfo.landProduct"></el-input>-->
                    </el-form-item>
                    <el-form-item label="品种">
                        <el-input :disabled="!type" v-model="LandParcelInfo.landOtherType"></el-input>
                    </el-form-item>
                    <el-form-item label="面积（亩）">
                        <el-input :disabled="!type" v-model="LandParcelInfo.mu"></el-input>
                    </el-form-item>
                    <el-form-item label="年产量">
                        <el-input required :disabled="!type" v-model="LandParcelInfo.landYearOutput"></el-input>
                    </el-form-item>

                    <el-form-item label="单位">
                        <el-select v-model="LandParcelInfo.landOutputUnit" placeholder="请选择">
                            <el-option v-for="item in landOutputUnit" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                        <!-- <el-input :disabled="!type" v-model="LandParcelInfo.landOutputUnit"></el-input> -->
                    </el-form-item>
                    <!-- <el-form-item label="作物">
                        <el-input :disabled="!type" v-model="LandParcelInfo.landProduce"></el-input>
                    </el-form-item> -->
                </el-form>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <div class="img">
                    <Avatar @click="getImgUrl" :headUrl="ossImgList">图片上传</Avatar>
                </div>
                <!--                <el-image style="width: 220px; height: 220px; border: 2px solid #EEEEEE; border-radius: 5px;" :src="ossImgList"  v-else></el-image>-->
            </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer" v-if="type">
            <el-button @click="cancel()">关 闭</el-button>
            <el-button type="primary" @click="editLand()">提 交</el-button>
        </span>

        <el-row>
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="flex">
                        <span>关联主体</span>
                        <addSubject style="float: right" :landCodeT="landCodeT" @click.native="toAddSubject" @on-click="reloadSubject" v-if="type">经营主体</addSubject>
                    </div>
                    <el-table :data="subjectData" border style="width: 100%">
                        <el-table-column prop="subjectName" label="主体名称" width="180">
                        </el-table-column>
                        <el-table-column prop="subjectBase" label="基地" width="180">
                        </el-table-column>
                        <el-table-column prop="lsSubjectUseArea" label="占地面积">
                        </el-table-column>
                        <el-table-column prop="lsYearValue" label="年产值(万元)">
                        </el-table-column>
                        <el-table-column prop="address" label="操作" v-if="type">
                            <template slot-scope="scope">
                                <el-link type="primary" style="margin-right: 20px" @click="editShow(scope.row)">编辑</el-link>
                                <el-link type="primary" @click="editShow(scope.row)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-row v-if="type">
            <el-col>
                <div style="padding: 15px">rwrwer</div>
            </el-col>
        </el-row>
    </el-dialog>

    <el-dialog title="修改主体" :append-to-body="true" label-width="100px" width="30%" :visible.sync="editSubjectShow">
        <el-form :model="form">
            <el-form-item label="经营主体">
                <el-input v-model="form.subjectName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="占用面积">
                <el-input v-model="form.lsSubjectUseArea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年产值(万元)">
                <el-input v-model="form.lsYearValue" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属基地">
                <el-input v-model="form.subjectBase" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editSubjectShow = false">取 消</el-button>
            <el-button type="primary" @click="updateSubject()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import axios from "@/api/request.js";
import {
    mapState,
    mapGetters
} from "vuex";
import {
    convertKey
} from "@/library";
import addSubject from "./addSubject/addSubject";
export default {
    props: {
        appendtobody: {
            type: Boolean,
            default: false,
        },
        LandParcelInfo: {
            type: Object,
            default: function () {
                return {};
            },
        },
        LandParcelInfoVisible: {
            type: Boolean,
            default: false,
        },
        subjectData: {
            type: Array,
            default: function () {
                return [];
            },
        },
        type: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        addSubject,
    },
    name: "PlotMsg",
    data() {
        return {
            avatarUrl: require("@/assets/head.jpeg"),
            form: {
                subjectName: "",
            },
            editSubjectShow: false,
            landCodeT: "",
            currentTownInfo: "",
            currentVillagerInfo: "",
            currentTownCode: "",
            currentVillagerCode: "",
            tableData: [],
            ruleForm: {},
            tabPosition: "left",
            id: "",
            towns: "",
            village: "",
            auditDate: "2021-04-22 02:00:19",
            canEdit: true,
            editBtn: "修改",
            filtersVillage: [],
            villagerIndex: 0,
            cascaderOptionsOne: {},
            cascaderOptionsTwo: {},
            landOutputUnit: {},
        };
    },
    created() {
        this.landCodeT = this.LandParcelInfo.landCode;
        fetch("/getTreeData.json")
            .then((res) => res.json())
            .then((res) => {
                this.filtersVillage = JSON.parse(
                    JSON.stringify(res.data.treeItem, [
                        "administrativeName",
                        "administrativeCode",
                        "children",
                    ])
                );
                this.filtersVillage = convertKey(this.filtersVillage, {
                    administrativeName: "label",
                    administrativeCode: "value",
                });
            });
        this.reloadSubject();
        this.getLandTypeList();
        this.getLandProductList();
        this.propertyValue();
    },
    computed: {
        naming() {
            return 1;
        },
        town() {
            let children = [];
            if (this.filtersVillage[0]) {
                if (this.filtersVillage[0].children[0]) {
                    children = this.filtersVillage[0].children[0].children;
                }
            }
            return children;
        },
        villager: {
            get() {
                let children = [];
                if (this.filtersVillage[0]) {
                    if (this.filtersVillage[0].children[0]) {
                        if (this.filtersVillage[0].children[0].children[this.villagerIndex])
                            children =
                            this.filtersVillage[0].children[0].children[this.villagerIndex]
                            .children;
                    }
                }
                return children;
            },
            set(index) {
                this.villagerIndex = index;
            },
        },
        ossImgList() {
            // LandParcelInfo.ossImgList != null && LandParcelInfo.ossImgList != '' ? LandParcelInfo.ossImgList[0].imgUrl : avatarUrl
            // console.log(this.LandParcelInfo.ossImgList != null && this.LandParcelInfo.ossImgList != '')
            if (
                this.LandParcelInfo.ossImgList != null &&
                this.LandParcelInfo.ossImgList != ""
            ) {
                return this.LandParcelInfo.ossImgList[0].imgUrl;
            } else {
                return this.avatarUrl;
            }
        },
        ...mapGetters({
            options: "getTreeData/filtersVillage",
        }),
        //修改图斑时需要的数据
        sendChange() {
            return {
                villagerIndex: 0,
                //地块id Long
                landId: "62",
                //地块编号 String
                landCode: "测试",
                //地块名字 String
                landName: "测试",
                //地块面积 double
                landArea: "66.66",
                //地块类型 int
                landType: [],
                //其他类型 String
                landOtherType: "测试",
                //年产量 double
                landProductArea: "66.66",
                //生产面积 double
                landYearOutput: "100",
                //产量单位 int
                landOutputUnit: "100",
                //产品类别 int
                landProduct: "1",
                //地产值 double
                landYearValue: "100.11",
                //计划编号 Long
                landPlanId: "123",
                //地块备注 String
                landMemo: "sss",
                //镇 Long
                landTownId: "1",
                //村 Long
                landVillageId: "1",
                //创建人 String
                createPerson: "测试",
                //更新人 String
                updatePerson: "测试",
                //审核人 String
                auditPerson: "2021-04-22 02:00:19",
                //审核时间 Date
            };
        },
        ...mapState({
            model: (state) => state.Map.model,
        }),
    },
    methods: {
        propertyValue() {
            this.$axios
                .get("/baseinfo/baseInfo/propertyValue/select", {
                    params: {
                        ptCode: "P01",
                    }
                })
                .then((res) => {
                    this.landOutputUnit = convertKey(res.data, {
                        pvCode: "value",
                        propertyValue: "label"
                    });
                });
        },
        handleChange(value) {
            this.LandParcelInfo.landType = value[value.length - 1];
        },
        handleChangeTwo(value) {
            this.LandParcelInfo.landProduct = value[value.length - 1];
        },
        getLandTypeList() {
            this.$axios
                .get("baseinfo/api/v1.0/fishing/landType/selectAll")
                .then((res) => {
                    this.cascaderOptionsOne = convertKey(res.data.list, {
                        landTypeName: "label",
                        landTypeCode: "value",
                    });
                });
        },
        getLandProductList() {
            this.$axios
                .get("baseinfo/api/v1.0/fishing/landTypep/productType/getList")
                .then((res) => {
                    console.log(res);
                    this.cascaderOptionsTwo = convertKey(res.data.list, {
                        productTypeName: "label",
                        productTypeCode: "value",
                    });
                });
        },
        // getLandNameAuto() {
        //     this.$axios
        //         .post("/rbac/data/LandInfoRule/getLandNameAuto", {
        //             params: {
        //                 landId: this.LandParcelInfo.id,
        //                 town: this.LandParcelInfo.landTownName,
        //                 village: this.LandParcelInfo.landVillageName,
        //                 landType: this.LandParcelInfo.landType,
        //             },
        //         })
        //         .then((res) => {
        //             this.LandParcelInfo.landName = res.data;
        //         });
        // },

        getImgUrl(arr) {
            console.log(arr);
            this.LandParcelInfo.imgUrl = arr.join(",");
            console.log(this.LandParcelInfo.imgUrl);
        },
        cancel() {
            this.LandParcelInfoVisible = false;
            this.$emit("landCancelVisiable", false);
        },
        townChange(res) {
            // console.log(res,this.town);
            this.currentVillagerCode = "";
            this.town.forEach((item, index) => {
                if (item.value === res) {
                    // this.villagerIndex = index
                    this.currentTownCode = item.label;
                    this.villager = index;
                    this.currentVillagerCode = item.children[0].label;
                }
            });
        },
        toAddSubject() {
            this.addSubjectShow = true;
            this.landCodeT = this.LandParcelInfo.landCode;
        },
        reloadSubject() {
            this.$axios
                .get("/rbac/data/LandSubject/get", {
                    params: {
                        "landSubject.lsLandCode": this.landCodeT,
                        "landSubject.lsSubjectCode": "",
                    },
                })
                .then((res) => {
                    if (res.data.list.length > 0) {
                        this.subjectData = res.data.list;
                    } else {
                        this.subjectData = [];
                    }
                });
        },
        handleClose(done) {
            if (this.type) {
                this.$confirm("确认关闭?")
                    .then(() => {
                        done();
                        this.cancel();
                    })
                    .catch(() => {});
            } else {
                this.cancel();
            }
        },
        savePlotMsg() {
            this.canEdit = !this.canEdit;
            this.editBtn === "修改" ?
                (this.editBtn = "保存") :
                (this.editBtn = "修改");
        },
        editLand() {
            // this.LandParcelInfo.landTownName = this.currentVillagerCode
            //   this.LandParcelInfo.landVillageName = this.currentTownCode

            console.log(123);
            console.log(this.LandParcelInfo.landYearOutput);
            //修改地块信息请求
            delete this.LandParcelInfo.landSubjectRs;
            console.log(this.LandParcelInfo)

            if (localStorage.getItem('currentTask/setCurrentTask') && this.$route.name === 'Map') {
                let currentTask = JSON.parse(localStorage.getItem('currentTask/setCurrentTask'))
                this.LandParcelInfo.landPlanId = currentTask.data.id;
            }

            axios
                .post("/rbac/data/LandInfo/collect", {
                    params: this.LandParcelInfo,
                })
                .then((res) => {
                    if(res.errorCode === '00000'){
                        this.$message.success("成功提交");
                        this.LandParcelInfoVisible = false;
                        this.$emit("reload");
                        this.$emit("landCancelVisiable", false);
                    }else{
                        this.$message.error("提交失败");
                    }

                });
        },
        editShow(row) {
            this.form = row;
            this.editSubjectShow = true;
        },
        updateSubject() {
            //修改主体信息请求
            axios
                .post("rbac/data/subject/updateInfo", {
                    params: {
                        id: this.form.landSubjectId,
                        subjectName: this.form.subjectName,
                        subjectBase: this.form.subjectBase,
                        lsSubjectUseArea: this.form.lsSubjectUseArea,
                        lsYearValue: this.form.lsYearValue,
                        lsLandCode: this.landCodeT,
                    },
                })
                .then((result) => {
                    this.$message.success("操作完成");
                    this.editSubjectShow = false;
                });
        },
    },
    watch: {
        LandParcelInfo() {
            if (this.LandParcelInfo.landVillageCode) {
                this.town.forEach((item, index) => {
                    if (
                        this.LandParcelInfo.landVillageCode.substring(0, 9) === item.value
                    ) {
                        this.currentTownCode = item.value;
                        this.villager = index;
                        for (let index = 0; index < item.children.length; index++) {
                            const element = item.children[index];
                            if (element.value === this.LandParcelInfo.landVillageCode) {
                                this.currentVillagerCode = element.value;
                            }
                        }
                    }
                });
            }
            // this.getLandNameAuto()
        },
    },
    mounted() {
        //修改图斑信息
        this.$fishing.setPlotMSG(this.sendChange).then((res) => {});
    },
};
</script>

<style lang="scss">
.postmsg {
    .el-dialog {
        width: 70%;
        min-width: 1000px;
        max-width: 1200px;
    }

    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .img {
        min-width: 250px;
        width: 100%;
        height: 250px;
    }

    .el-form {
        width: 90%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;

        >.el-form-item {
            width: 50%;

            >.el-select {
                width: 100%;
            }

            >.el-input {
                width: 100%;
            }
        }
    }

    .column {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .btn-block {
            margin-top: 15px;
        }
    }

    .el-input__inner {
        width: 100%;
    }
}
</style>
